<template>
    <div class="index web-inner">
        <div class="main-title">
            <span>全台加盟連鎖品牌</span>
        </div>
        <div class="index-inner" >
            <div class="index-left">
                <div class="page">
                    <a :href="'#/detail/'+item.brand_id" v-for="item in pageContent" class="page-item">
                        <div class="left">
                            <img :src="brandImg+item.brand_logo" alt="">
                        </div>
                        <div class="center">
                            <div class="title">
                                {{item.brand_name}}
                            </div>
                            <div class="text">加盟金：{{item.fran_fee}}</div>
                            <div class="text">加盟專線：{{item.fran_tel}}</div>
                            <div class="text">總部地址：{{item.frad_addr}}</div>
                            <div class="desc" v-html="item.intro_text"></div>
                        </div>
                        <div class="right">
                            <a :href="'#/detail/'+item.brand_id">
                                <img src="../../static/img/btn4.png" alt="">
                            </a>
                        </div>
                    </a>
                </div>
                <div class="pagenation">
                    <el-button @click="changePage(-1)" :disabled="page===1"  icon="el-icon-arrow-left">上一页</el-button>
                    <el-button @click="changePage(1)" :disabled="loadAll===true">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </div>
            </div>
            <div class="index-right">
                <div v-if="list.length>0" class="xuqiu">
                    <div class="xuqiu">
                        <div v-if="list.length>0" class="title">
                            <span>加盟需求詢問</span>
                        </div>
                        <div class="main">
                            <transition-group name="list" tag="p">
                                <div class="main-item list-item"  v-for="(item,index) in list" :key="index">
                                    <div class="icon"></div>
                                    <div class="right">
                                        <div class="top">
                                            {{item.name}} 地點：{{item.location}}
                                        </div>
                                        <div class="bottom">
                                            預算：{{item.budget}}
                                        </div>
                                    </div>
                                </div>
                            </transition-group>
                        </div>
                    </div>
                </div>
                <div v-if="bestbrand.length>0" class="xuqiu1">
                    <div class="xuqiu1">
                        <div class="title">
                            <span>熱搜品牌</span>
                        </div>
                        <div class="main">
                            <transition-group name="list" tag="p">
                                <div class="bestbrand"  v-for="(item,index) in bestbrand" :key="index">
                                    <a :href="'#/detail/'+item.brand_id" style="color: #000000">
                                        <img :src="brandImg+item.brand_logo" alt="">
                                        <div class="text" v-html="item.brand_name"></div>
                                    </a>
                                </div>
                            </transition-group>
                        </div>
                    </div>
                </div>
                <div v-if="newbrand.length>0" class="xuqiu1">
                    <div class="xuqiu1">
                        <div class="title">
                            <span>最新刊登</span>
                        </div>
                        <div class="main">
                            <transition-group name="list" tag="p">
                                <div class="newbrand"  v-for="(item,index) in newbrand" :key="index">
                                    <a :href="'#/detail/'+item.brand_id" style="color: #000000">
                                        <div class="text">{{item.brand_name}}</div>
                                        <div v-html="item.promotion"></div>
                                    </a>
                                </div>
                            </transition-group>
                        </div>
                    </div>
                </div>
                <div class="baodao">
                    <indexBaodao></indexBaodao>
                </div>
            </div>
        </div>
        <div class="common-bottom fangda">
            <img :src="imgUrl+bottomImg.image" alt="">
        </div>
    </div>
</template>

<script>
  import qs from 'qs';
  import lunbo from "../components/swiper-lunbo"
  import ad from "../components/swiper-ad"
  import indexTab from "../components/index-tab"
  import indexXuqiu from "../components/index-xuqiu"
  import indexBaodao from "../components/index-baodao"
  import indexNews from "../components/index-news"
  import utils from "../common/utils"

  export default {
    name: 'home',
    components:{
      lunbo,
      ad,
      indexTab,
      indexXuqiu,
      indexBaodao,
      indexNews
    },
    data() {
      return {
        meishi:[
          {
            title:"美食品牌",
          },
          {
            title:"中式餐點",
            id:4
          },
          {
            title:"異國美食",
            id:5
          },
          {
            title:"早午餐",
            id:3
          }
        ],
        dianxin:[
          {
            title:"冰品點心",
          },
          {
            title:"咖啡甜點",
            id:2
          },
          {
            title:"冰品飲料",
            id:1
          }
        ],
        drink:[],
        food:[],
        h1:"",
        h2:"",
        h3:[],
        imgList:[],
        bottomImg:"",
        hotbrand:[],
        page:1,
        loadAll:false,
        keyword:this.$store.state.keyword,
        pageContent:[],
        list:[],
        bestbrand:[],
        newbrand:[],
        pageSize:5
      }
    },
    mounted() {
      this.getImg()
      this.changePage(0)
      this.$bus.$on('searchData',(data) => {
        this.changePage(data);
      });
    },
    methods:{
      getImg() {
        this.$http.post(this.API.get_banner_home).then((res) => {
          let $this = this;
        console.log(res);
        if(res.status ===200 && res.data.length>0){
          res.data.forEach((item) => {
            if(item.location==="h1"){
            this.h1=item;
          }
          if(item.location==="h2"){
            this.h2=item;
          }
          if(item.location==="h3"){
            this.h3.push(item);
          }
          if(item.location==="h0"){
            this.imgList.push(item);
          }
          if(item.location==="h4"){
            this.bottomImg=item;
          }
        })
        }
      })
      },
      changePage(num) {
        this.keyword = this.$store.state.keyword
        console.log(this.$store.state.keyword);
        this.page+=num;
        this.$http({
          method:"post",
          url: this.API.get_search_page,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: qs.stringify({keyword:this.keyword,page:this.page})
        }).then((res) => {
          if(res.status ===200 && res.data){
          this.pageContent = res.data.result;
          this.list = res.data.apply_fran;
          this.bestbrand = res.data.bestbrand;
          this.newbrand = res.data.newbrand;
          if(res.data.result.length<this.pageSize){
            this.loadAll = true;
          }else{
            this.loadAll = false;
          }
        }
      })
      },
    }
  }
</script>
<style lang="less" scoped>
    @import "../style/base";
    a{
        text-decoration: none;
    }
    .index{
        margin: 0 auto;
        padding:  40px 0 0;
        .bestbrand{
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-bottom: 20px;
            border: 1px solid #e6e6e6;
            img{
                width: 100%;
            }
            .text{
                text-align: center;
                width: 100%;
                height: 30px;
                line-height: 30px;

            }
        }
        .newbrand{
            border: 1px dashed #e6e6e6;
            margin-bottom: 20px;
            padding: 20px;
        }
        .main-title{
            width: 100%;
            border-bottom: 3px solid #275d98;
            display: flex;
            margin-bottom: 20px;
            span{
                color: #ffffff;
                height: 50px;
                line-height: 50px;
                font-size: 18px;
                background-color: #275d98;
                width: 200px;
                text-align: center;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }
        }
        .index-inner{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .index-left{
            width: 850px;
            .page{
                .page-item{
                    padding: 20px;
                    border: 1px solid #e6e6e6;
                    border-radius: 10px;
                    margin-bottom: 20px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .left{
                        width: 200px;
                        img{
                            width: 100%;
                        }
                    }
                    .center{
                        flex: 1;
                        margin: 0 20px;
                        .title{
                            font-size: 22px;
                            color: #275d98;
                            margin-bottom: 10px;
                        }
                        .text{
                            font-size: 14px;
                            color: #000000;
                            line-height: 22px;
                        }
                        .desc{
                            margin-top: 20px;
                            font-size: 14px;
                            color: #000000;
                            line-height: 22px;

                        }
                    }
                    .right{
                        width: 150px;
                        img{
                            width: 100%;
                        }
                    }
                }
            }
            .pagenation{
                text-align: center;
                margin-bottom: 50px;
            }
            .big-lunbo{
                width: 100%;
                height: 386px;
                margin-bottom: 32px;
                position: relative;

            }
            .tuijian{
                height: 250px;
                width: 100%;
                margin-bottom: 25px;
            }
            .tab{
                width: 100%;
                margin-bottom: 25px;
            }
        }
        .index-right{
            width:260px;
            .big-hello{
                height: 386px;
                width: 100%;
                margin-bottom: 42px;
                a{
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .xuqiu1{
                width: 100%;
                box-sizing: border-box;
                margin-bottom: 45px;
                .xuqiu1{
                    width: 100%;
                    .title{
                        height: 40px;
                        background-color: #ffffff;
                        font-size: 20px;
                        color: #000000;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0 12px;
                        font-weight: bold;
                        border: 1px solid #000000;
                        margin-bottom: 10px;
                    }
                    .main{
                        background-color: #f9f9f9;
                        width: 100%;
                        overflow: hidden;
                        box-sizing: border-box;
                        .main-item{
                            box-sizing: border-box;
                            height: 65px;
                            padding: 0 12px;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            border-bottom: 1px dashed #e6e6e6;
                            cursor: pointer;
                            &:hover{
                                box-shadow: 0 0 2px 2px #e6e6e6;
                            }
                            .bottom{
                                color: #c70b14;
                            }
                        }
                        .icon{
                            width: 60px;
                            height: 45px;
                            background-image: url("../../static/img/duihua.png");
                            background-size: 100% 100%;
                        }
                    }
                    .list-item {
                        transition: all 1s;
                        display: inline-block;
                        margin-right: 10px;
                    }
                    .list-enter-active, .list-leave-active {
                        transition: all 1s;
                    }
                    .list-enter, .list-leave-to
                        /* .list-leave-active for below version 2.1.8 */ {
                        opacity: 0;
                        transform: translateY(-30px);
                    }
                }
            }
            .xuqiu{
                width: 100%;
                box-sizing: border-box;
                margin-bottom: 45px;
                .xuqiu{
                    width: 100%;
                    .title{
                        height: 40px;
                        background-color: #ffffff;
                        font-size: 20px;
                        color: #000000;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0 12px;
                        font-weight: bold;
                        border: 1px solid #000000;
                        margin-bottom: 10px;
                        .more{
                            font-size: 16px;
                            color: #7d3e03;
                            cursor: pointer;
                        }
                    }
                    .main{
                        background-color: #f9f9f9;
                        width: 100%;
                        max-height: 650px;
                        overflow: hidden;
                        border-right: 1px solid #e6e6e6;
                        border-left: 1px solid #e6e6e6;
                        border-bottom: 1px solid #e6e6e6;
                        box-sizing: border-box;
                        .main-item{
                            box-sizing: border-box;
                            height: 65px;
                            padding: 0 12px;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            border-bottom: 1px dashed #e6e6e6;
                            cursor: pointer;
                            &:hover{
                                box-shadow: 0 0 2px 2px #e6e6e6;
                            }
                            .bottom{
                                color: #c70b14;
                            }
                        }
                        .icon{
                            width: 60px;
                            height: 45px;
                            background-image: url("../../static/img/duihua.png");
                            background-size: 100% 100%;
                        }
                    }
                    .list-item {
                        transition: all 1s;
                        display: inline-block;
                        margin-right: 10px;
                    }
                    .list-enter-active, .list-leave-active {
                        transition: all 1s;
                    }
                    .list-enter, .list-leave-to
                        /* .list-leave-active for below version 2.1.8 */ {
                        opacity: 0;
                        transform: translateY(-30px);
                    }
                }
            }
            .guanggao{
                width: 100%;
                height:100px;
                margin-bottom: 45px;
                cursor: pointer;
                img{
                    width: 100%;
                }
            }
        }
    }
</style>
